<template>
  <div class="c-pagination">
    <span class="pagination-total">共有 {{ pageTotal }} 条记录</span>
    <el-pagination
      class="pagination"
      popper-class="c-pagination-dropdown"
      :layout="layout"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :total="pageTotal"
      background
      @size-change="changeCurrentSize"
      @current-change="changeCurrentIndex"
    />
  </div>
</template>

<script>
import _isNaN from 'lodash/isNaN'

const DEFAULT_PAGE_NUM = 1
const DEFAULT_PAGE_SIZE = 10
const DEFAULT_PAGE_SIZES = [ 10, 20, 30, 40, 50 ]

export default {
  name: 'CPagination',
  props: {
    data: {
      type: Object
    },
    total: {
      type: [Number, String]
    },
    pageNum: {
      type: Number,
      default: DEFAULT_PAGE_NUM
    },
    pageSize: {
      type: Number,
      default: DEFAULT_PAGE_SIZE
    },
    pageSizes: {
      type: Array,
      default: () => {
        return DEFAULT_PAGE_SIZES
      }
    },
    layout: {
      type: String,
      default: 'prev, pager, next, sizes'
    }
  },
  emits: ['current-change', 'size-change', 'update:pageNum', 'update:pageSize'],
  computed: {
    pageTotal () {
      if (typeof this.total !== 'undefined') {
        return Number(this.total)
      }
      return Number(this.data.total) || 0
    }
  },
  watch: {
    pageSize (newValue, oldValue) {
      if (newValue <= 0 || _isNaN(newValue)) {
        this.changeCurrentSize(DEFAULT_PAGE_SIZE)
      } else if (newValue !== oldValue) {
        this.changeCurrentSize(newValue)
      }
    }
  },
  methods: {
    // 改变 currentNum
    changeCurrentIndex (value) {
      this.$emit('update:pageNum', value)
      this.$emit('current-change', value)
    },
    // 改变 currentSize
    changeCurrentSize (value) {
      this.$emit('update:pageSize', value)
      this.$emit('size-change', value)
      this.changeCurrentIndex(1)
    }
  }
}
</script>

<style lang="less">
  .c-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;

    .pagination-total {
      font-size: 12px;
      color: #3F4243;
    }

    .el-pagination {
      padding: 0;

      .btn-prev, .btn-next, .el-pager li {
        min-width: 24px;
        height: 24px;
        margin: 0 4px;
        border: 1px solid #DDDDDD;
        color: #666666;
        font-weight: normal;
        font-size: 12px;
        line-height: 22px;
        background: #FFFFFF;
        border-radius: 0;
      }

      .btn-prev, .btn-next {
        .el-icon {
          font-weight: normal;
        }
      }

      .el-pager li:not(.disabled).active {
        background: #60ADFF;
        border-color: #60ADFF;
      }

      .el-pager .more::before {
        line-height: 24px;
      }

      .el-pagination__sizes {
        height: 24px;
        margin-right: 0;

        .el-select {
          display: block;
          line-height: 24px;

          .el-input {
            width: 90px;
            margin-right: 0;
            margin-left: 4px;

            .el-input__inner {
              height: 24px;
              padding-right: 20px;
              color: #666666;
              font-size: 12px;
            }

            .el-input__icon {
              line-height: 22px;
            }
          }
        }
      }
    }
  }

  .c-pagination-dropdown {
    .el-select-dropdown__item {
      font-size: 12px;
      font-weight: normal;
    }
  }
</style>
